import React, { useState, useEffect } from 'react'
import { Row, Col, Select, Input, Radio, message } from 'antd';
// import { CloudUploadOutlined } from '@ant-design/icons'
import style1 from './index.module.scss';
import { List } from './List';
import { Link } from 'react-router-dom';
import {
    PrinterOutlined,
    LeftOutlined,
    CheckCircleFilled,
    ClockCircleFilled
} from '@ant-design/icons';
import './index.scss'
import { useSelector } from 'react-redux'
import { GetCustomerInfoApi, SubmitMsgApi } from '../../http/preLoanApi'
const { Option } = Select
const style = { background: '#fff', padding: '8px 0' }

const style3 = { margin: 0 }
const style4 = { padding: 0 }
export default function CustmerSth() {
    const preLoanMange = useSelector((state) => state.preLoanMange)
    console.log('获取顶层数据', preLoanMange);
    // const Id = useSelector((state) => state.preLoanMange[preLoanMange.length - 1])
    const [selectValue, setSelectValue] = useState('')
    const [selectNumber, setselectNumber] = useState(0)
    const [textValue, setTextValue] = useState('')
    // 额度批复绑定
    const [money1, getMoney1] = useState(0)
    // 综合利率绑定
    const [money2, getMoney2] = useState(0)
    const [id, setId] = useState('')
    const [preLoanMangeData, setPreLoanMangeData] = useState([])
    // 借款信息
    const [data11, setData1] = useState({})
    const [data22, setData2] = useState({})
    // 个人信息
    const [personalData11, setPersonalData1] = useState({})
    const [personalData22, setPersonalData2] = useState({})
    // 居住信息
    const [liveData11, setLiveData1] = useState({})
    const [liveData22, setLiveData2] = useState({})
    // 联系人信息
    const [ContactData11, setContactPerson1] = useState({})
    const [ContactData22, setContactPerson2] = useState({})
    // 职业信息
    const [perfessionData11, setPerfessionData1] = useState({})
    const [perfessionData22, setPerfessionData2] = useState({})

    // 银行信息
    const [bankData11, setbankData1] = useState({})
    const [bankData22, setbankData2] = useState({})

    // 初审结果
    const [firstRes, setFirstRes] = useState({})

    const arr = Array.prototype.slice.call(preLoanMange)
    console.log(arr);
    const Id = arr[arr.length - 1].id

    const arr1 = [
        {
            url: "#jiekuangxinxi",
            title: "借款信息"
        },
        {
            url: '#gerrenxinxi',
            title: '个人信息'
        }, {
            url: '#juzhuxinxi',
            title: '居住信息'
        }, {
            url: '#lianxirenxinxi',
            title: '联系人信息'
        }, 
        {
            url:'#zhiyexinxi',
            title:"职业信息"
        },{
            url: '#shenfengzxinxi',
            title: '身份认证信息'
        }, {
            url:'renlianxinxi',
            title:'人脸识别'
        },{
            url: '#bankInfo',
            title: '银行资料'
        },  
        {
            url:"#carxinxi",
            title:"车辆证明材料"

        },{
            url: '#shenheixinxi',
            title: '审核信息'
        },]
    const lis = arr1.map(item => {
        return (
            <a href={item.url}>
                <li className={style1.li}>{item.title} </li>
            </a>
        )
    })
    const checked = (e) => {
        console.log(e.target.innerText);

    }


    useEffect(() => {
        console.log('--------------')
        // const arr = Array.prototype.slice.call(preLoanMange)
        // console.log(arr);
        // const Id = arr[arr.length - 1].id
        if (id) {
            console.log('Id', Id)
            const arr1 = arr[0]
            console.log('arr1', arr1);
            console.log('id', id)
            const preLoanMangeData1 = arr1.filter(item => item.loan_id === id)
            console.log('筛选之后的数据', preLoanMangeData1)
            setPreLoanMangeData(preLoanMangeData1)
            // 借款信息1
            let obj = preLoanMangeData1[0]
            console.log('obj', obj)
            const data1 = {
                loan_nature: obj.loan_nature,
                loan_product: obj.loan_product,
                reimbursement_means: obj.reimbursement_means,
                applied_amount: obj.applied_amount + '元',
                compound_interest: obj.compound_interest + '%',
            }
            setData1(data1)
            const data2 = {
                loan_type: obj.loan_type,
                loan_use: obj.loan_use,
                time_limit: obj.time_limit,
                approval_amount: obj.approval_amount + '元',
                management_fee: obj.management_fee + '%',
            }
            setData2(data2)
            // 初审结果
            const obj1 = obj.auditList[0]
            const firstResult = {
                audit_result: obj1.audit_result,
                feedback: obj1.feedback
            }
            setFirstRes(firstResult)
        }
        setId(Id)
    }, [id])

    useEffect(() => {
        console.log('id', id)
        GetCustomerInfoApi(id).then((res) => {
            console.log('请求客户信息正确', res.data);
            if (res.data.code === 200) {
                console.log('获取客户信息', res.data.data)
                const obj = res.data.data
                // 个人信息
                const personalData1 = {
                    name: obj.name,
                    phone: obj.phone,
                    identity_card: obj.identity_card,
                    marriage: obj.marriage
                }
                setPersonalData1(personalData1)
                const personalData2 = {
                    sex: obj.sex,
                    age: obj.age,
                    education: obj.education,
                    email: obj.email
                }
                setPersonalData2(personalData2)
                // 居住信息
                const liveData1 = {
                    situation: obj.liveInformation.situation,
                    address: obj.liveInformation.address,
                    live_time: obj.liveInformation.live_time
                }
                setLiveData1(liveData1)
                const liveData2 = {
                    latter: obj.liveInformation.latter,
                    home_phone: obj.liveInformation.home_phone
                }
                setLiveData2(liveData2)
                // 联系人信息
                const ContactData1 = {
                    contact_name: obj.contact.contact_name,
                    contact_phone: obj.contact.contact_phone
                }
                setContactPerson1(ContactData1)
                const ContactData2 = {
                    relation: obj.contact.relation
                }
                setContactPerson2(ContactData2)

                // 职业信息
                const perfessionData1 = {
                    start_time: obj.professional.start_time.substr(0, 10),
                    address: obj.professional.address,
                    company_nature: obj.professional.company_nature,
                    income: obj.professional.income,
                    unit_phone: obj.professional.unit_phone
                }
                setPerfessionData1(perfessionData1)

                const perfessionData2 = {
                    company_latter: obj.professional.company_latter,
                    address: obj.professional.address,
                    industry: obj.professional.industry,
                    inducation_start: obj.professional.inducation_start.substr(0, 10)
                }
                setPerfessionData2(perfessionData2)
                // 银行信息
                const bankData1 = {
                    open_bank: obj.bank.open_bank,
                    open_address: obj.bank.open_address,
                    bank_account: obj.bank.bank_account
                }
                setbankData1(bankData1)
                const bankData2 = {
                    account_name: obj.bank.account_name,
                    branch_name: obj.bank.branch_name
                }
                setbankData2(bankData2)
            }
        })
            .catch((err) => {
                console.log('请求客户信息错误', err);
            })
    }, [id])

    // 获取选择框的值
    const getSelect = (e) => {
        console.log('选择框的值', e);
        setSelectValue(e)
        if (e === '审核通过') {
            setselectNumber(2)
        } else if (e === '审核拒绝') {
            setselectNumber(7)
        } else if (e === '审核驳回') {
            setselectNumber(4)
        }
    }

    // 获取文本框的值
    const getText = (e) => {
        console.log('获取文本框的值', e.target.value);
        if (e.target.value != '请选择' || e.target.value != '') {
            setTextValue(e.target.value)
        }

    }

    // 获取审批金额
    const getMoneyValue1 = (e) => {
        if (e.target.value > 0) {
            getMoney1(e.target.value)
        }
    }
    // 获取综合利率的zhi
    const getMoneyValue2 = (e) => {
        if (e.target.value > 0) {
            getMoney2(e.target.value)
        }
    }
    // 提交审核详情
    const submitMsg = () => {
        SubmitMsgApi({
            approval_amount: money1,
            compound_interest: money2,
            loan_state: selectNumber,
            audit_result: selectValue,
            auditor_id: 1,
            feedback: textValue,
            loan_id: id,
            state: '复审'
        }).then((res) => {
            console.log('提交审核请求成功', res);
            message.success('提交成功');
        })
            .catch((err) => {
                console.log('提交审核请求失败', err);
                message.error('提交成功');
            })
    }



    // 借款信息表头1
    const loanInfoData1 = [
        {
            id: 1,
            title: '贷款性质',
            key: 'loan_nature'
        },
        {
            id: 2,
            title: '贷款产品',
            key: 'loan_product'
        },
        {
            id: 3,
            title: '还款方式',
            key: 'reimbursement_means'
        },
        {
            id: 4,
            title: '申请金额',
            key: 'applied_amount'
        },
        {
            id: 5,
            title: '综合利率',
            key: 'compound_interest'
        }
    ]
    // 借款信息表头2
    const loanInfoData2 = [
        {
            id: 1,
            title: '贷款类型',
            key: 'loan_type'
        },
        {
            id: 2,
            title: '贷款用途',
            key: 'loan_use'
        },
        {
            id: 3,
            title: '借款期限',
            key: 'time_limit'
        },
        {
            id: 4,
            title: '审批金额',
            key: 'approval_amount'
        },
        {
            id: 5,
            title: '借款管理费',
            key: 'management_fee'
        }
    ]


    // 个人信息表头1
    const PersonInfo1 = [
        {
            id: 1,
            title: '本人姓名',
            key: 'name'
        },
        {
            id: 2,
            title: '手机号码',
            key: 'phone'
        },
        {
            id: 3,
            title: '身份证',
            key: 'identity_card'
        },
        {
            id: 4,
            title: '婚姻状况',
            key: 'marriage'
        }

    ]
    // 个人信息表头2
    const PersonInfo2 = [
        {
            id: 1,
            title: '性别',
            key: 'sex'
        },
        {
            id: 2,
            title: '年龄',
            key: 'age'
        },
        {
            id: 3,
            title: '学历',
            key: 'education'
        },
        {
            id: 4,
            title: '邮箱',
            key: 'email'
        }
    ]


    // 居住信息表头1
    const liveInfo1 = [
        {
            id: 1,
            title: '居住情况',
            key: 'situation'
        },
        {
            id: 2,
            title: '详细地址',
            key: 'address'
        },
        {
            id: 3,
            title: '现居住时长',
            key: 'live_time'
        }
    ]
    // 居住信息表头2
    const liveInfo2 = [
        {
            id: 1,
            title: '现居住地',
            key: 'latter'
        },
        {
            id: 2,
            title: '住宅电话',
            key: 'home_phone'
        }
    ]

    // 联系人表头1
    const ContactPerson1 = [
        {
            id: 1,
            title: '直系亲属姓名',
            key: 'contact_name'
        },
        {
            id: 2,
            title: '移动电话',
            key: 'contact_phone'
        }
    ]

    // 联系人表头2
    const ContactPerson2 = [
        {
            id: 1,
            title: '关系',
            key: 'relation'
        }
    ]


    // 职业信息表头1 
    const perfessionInfo1 = [
        {
            id: 1,
            title: '参与工作时间',
            key: 'start_time'
        },
        {
            id: 2,
            title: '公司地址',
            key: 'address'
        },
        {
            id: 3,
            title: '公司性质',
            key: 'company_nature'
        },
        {
            id: 4,
            title: '每月收入',
            key: 'income'
        },
        {
            id: 5,
            title: '单位电话',
            key: 'unit_phone'
        }
    ]
    // 职业信息表头2
    const perfessionInfo2 = [
        {
            id: 1,
            title: '公司名称',
            key: 'company_latter'
        },
        {
            id: 2,
            title: '详细地址',
            key: 'address'
        },
        {
            id: 3,
            title: '所在行业',
            key: 'industry'
        },
        {
            id: 4,
            title: '入职时间',
            key: 'inducation_start'
        }
    ]


    // 人脸识别表头
    const FaceInfo = [
        {
            id: 1,
            title: '认证状态',
            key: 'ceritification'
        }
    ]
    // 人脸识别信息
    const FaceData = {
        ceritification: '认证通过'
    }

    // 银行信息表头1
    const bankInfo1 = [
        {
            id: 1,
            title: '开户行',
            key: 'open_bank'
        },
        {
            id: 2,
            title: '开户地',
            key: 'open_address'
        },
        {
            id: 3,
            title: '银行账号',
            key: 'bank_account'
        }
    ]
    // 银行信息表头2
    const bankInfo2 = [
        {
            id: 1,
            title: "户名",
            key: 'account_name'
        },
        {
            id: 2,
            title: '支行名称',
            key: 'branch_name'
        }

    ]

    return (
        <div className='customerthBox'>
            <div className={style1.customerNav}>
                <span className={style1.title2}>贷款申请管理</span>
                <div className={style1.right}>
                    <div>
                        <span className={style1.top}>初审 <CheckCircleFilled /> </span>
                        <span className={style1.top}>复审 <CheckCircleFilled /> </span>
                        <span className={style1.top2}>终审 <CheckCircleFilled /> </span>
                        <span className={style1.top2}>放款 <CheckCircleFilled /> </span>
                        <span className={style1.top2}>还款 <CheckCircleFilled /> </span>
                        <span className={style1.top2, style1.top3}>完成 <ClockCircleFilled /> </span>

                        <Radio.Button value="large" > <PrinterOutlined /> 打印</Radio.Button>

                        <Link to='/home/recheck'><Radio.Button value="large" className='buttonloan'> <LeftOutlined /> 返回</Radio.Button></Link>
                    </div>
                </div>
            </div>
            <Row >
                {/* 表格左边 */}
                <Col className="gutter-row" span={18}>
                    {/* 借款信息 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='jiekuangxinxi'>借款信息</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                            <Col className="gutter-row jiekuan jiekuan1" style={style4} span={12}>
                                {List(loanInfoData1, data11)}
                            </Col>
                            <Col className="gutter-row jiekuan" style={style4} span={12}>
                                {List(loanInfoData2, data22)}
                            </Col>
                        </Row>
                    </div>

                    {/* 个人信息 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='gerrenxinxi'>个人信息</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(PersonInfo1, personalData11)}
                            </Col>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(PersonInfo2, personalData22)}
                            </Col>
                        </Row>
                    </div>

                    {/* 居住信息*/}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='juzhuxinxi'>居住信息</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(liveInfo1, liveData11)}
                            </Col>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(liveInfo2, liveData22)}
                            </Col>
                        </Row>
                    </div>
                    {/* 联系人信息 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='lianxirenxinxi'>联系人信息</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(ContactPerson1, ContactData11)}
                            </Col>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(ContactPerson2, ContactData22)}
                            </Col>
                        </Row>
                    </div>
                    {/* 职业信息 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='zhiyexinxi'>职业信息</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(perfessionInfo1, perfessionData11)}
                            </Col>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(perfessionInfo2, perfessionData22)}
                            </Col>
                        </Row>
                    </div>

                    {/* 身份证信息 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='shenfengzxinxi'>身份证信息</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                            <Col className="gutter-row idcard" span={12} >身份证正/反面
                                <Row>
                                    <Col className="gutter-row" span={12}>
                                        <span className='zhengmian'></span>
                                    </Col>
                                    <Col className="gutter-row" span={12}>
                                        <span className='fanmian'></span>
                                    </Col>
                                </Row>
                            </Col>
                            <Col className="gutter-row handtext" span={12}>
                                手持身份证
                                <Row>
                                    <Col className="gutter-row" span={24}>
                                        <span className='hand'></span>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </div>
                    {/* 人脸识别 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='renlianxinxi'>人脸识别</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                            <Col className="gutter-row" span={24} style={style4}>
                                {List(FaceInfo, FaceData)}
                            </Col>
                        </Row>
                    </div>
                    {/* 银行信息 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='bankInfo'>银行信息</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(bankInfo1, bankData11)}
                            </Col>
                            <Col className="gutter-row" span={12} style={style4}>
                                {List(bankInfo2, bankData22)}
                            </Col>
                        </Row>
                    </div>
                    {/* 车辆证明材料 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='carxinxi'>车辆证明材料</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                            <Col className="gutter-row" span={4}>
                                <div className='carmatarils'>
                                    <div>fdnfkodsjfdlvkcdss.jpg</div>
                                    <div>fdnfkodsjfdlvkcdss.jpg</div>
                                    <div>fdnfkodsjfdlvkcdss.jpg</div>
                                </div>
                            </Col>
                        </Row>
                    </div>
                    {/* 客户信息与材料核查-初审 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p id='shenheixinxi'>客户信息与材料核查-初审</p>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result1'>
                            <Col className="gutter-row" span={4}>
                                初审结果
                            </Col>
                            <Col className="gutter-row" span={20}>
                                <Select style={{ width: 120 }} value={firstRes.audit_result} disabled>
                                    <Option value={firstRes.audit_result}></Option>
                                </Select>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result2'>
                            <Col className="gutter-row textPos" span={4}>
                                审核意见
                            </Col>
                            <Col className="gutter-row" span={20}>
                                <Input.TextArea value={firstRes.feedback} disabled />
                            </Col>
                        </Row>
                    </div>
                    {/* 借款申请额度审批-复审 */}
                    <div>
                        <Row>
                            <Col className={style1.pre_title} span={24}>
                                <p>借款申请额度审批-复审</p>
                            </Col>
                        </Row>
                        {/* 复审结果 */}
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11 '>
                            <Col className="gutter-row" span={4}>
                                复审结果
                            </Col>
                            <Col className="gutter-row" span={20}>
                                <Select defaultValue="请选择" style={{ width: 120 }} allowClear onSelect={getSelect}>
                                    <Option value="审核通过">审核通过</Option>
                                    <Option value="审核拒绝">审核拒绝</Option>
                                    <Option value="审核驳回">审核驳回</Option>
                                </Select>
                            </Col>
                        </Row>
                        {/* 额度批复 */}
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11' style={style3}>
                            <Col className="gutter-row" span={4}>
                                额度批复
                            </Col>
                            <Col className="gutter-row" span={20}>
                                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11'>
                                    <Col className="gutter-row" span={12}>审批金额</Col>
                                    <Col className="gutter-row" span={10}>
                                        <Input placeholder='50000' onChange={getMoneyValue1} />
                                    </Col>
                                    <Col span={2}>
                                        <span>元</span>
                                    </Col>
                                </Row>

                                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11'>
                                    <Col className="gutter-row" span={12}>综合利率</Col>
                                    <Col className="gutter-row" span={10}>
                                        <Input placeholder='13.5' onChange={getMoneyValue2} />
                                    </Col>
                                    <Col span={2}>
                                        <span>%</span>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result2'>
                            <Col className="gutter-row textPos" span={4}>
                                审核意见
                            </Col>
                            <Col className="gutter-row" span={20}>
                                <Input.TextArea onBlur={getText} />
                            </Col>
                        </Row>
                        <button type="button" className='submitBtn' onClick={submitMsg}>提交审核</button>
                    </div>
                </Col>

                {/* 右边小导航 */}
                <Col className="gutter-row" span={6}>
                    <div className={style1.rightBox}>
                        <ul className={style1.rightNav} onClick={checked}>
                            {lis}
                        </ul>
                    </div>
                </Col>
            </Row>
        </div>
    )

}


